<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        
    </style>
</head>

<body>

    <!-- header start -->
    <header class="header">
        <a href="" class="position">
            <span class="iconfont icon-weizhi"></span>
        </a>
        <div class="search">
            <form action="">
                <input type="text" placeholder="小芒果" class="input-search">
            </form>
            <span class="iconfont icon-fangdajing"></span>
        </div>
        <div class="chat">
            <span class="iconfont icon-xinxi"></span>
        </div>
    </header>
    <!-- end header -->

    <!-- main start -->
    <main>
        <div class="container">
            <!-- menu start -->
            <nav class="menu">
                <ul>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg1">
                                <span class="iconfont icon-shucai"></span>
                            </div>
                            <p class="title">水果蔬菜</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg2">
                                <span class="iconfont icon-qinlei"></span>
                            </div>
                            <p class="title">肉类单品</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg3">
                                <span class="iconfont icon-yu"></span>
                            </div>
                            <p class="title">海鲜水产</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg4">
                                <span class="iconfont icon-lengdongshipin"></span>
                            </div>
                            <p class="title">速冻食品</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg5">
                                <span class="iconfont icon-mimian"></span>
                            </div>
                            <p class="title">粮油食品</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg6">
                                <span class="iconfont icon-dazhe"></span>
                            </div>
                            <p class="title">打折商品</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg7">
                                <span class="iconfont icon-xuegao"></span>
                            </div>
                            <p class="title">冰糕雪棍</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg8">
                                <span class="iconfont icon-lingshi"></span>
                            </div>
                            <p class="title">休闲零食</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg9">
                                <span class="iconfont icon-yinliao"></span>
                            </div>
                            <p class="title">饮料酒水</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="bl1-1 bg10">
                                <span class="iconfont icon-yijia"></span>
                            </div>
                            <p class="title">日用百货</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- end menu -->
            
            <!-- cheap start -->
            <section class="cheap">
                <div class="cheap-title">
                    <span class="title">超划算</span>
                    <a href="#" class="more">更多</a>
                </div>
                <div class="cheap-content">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="bl94-81">
                                    <a href="#"><img src="./images/pro1.png" alt=""></a>

                                </div>
                                <p class="title ellipsis-single-line">
                                    <a href="#">富士小苹果 1.5…</a>
                                </p>
                                <p class="info">
                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                    <a href="#" class="cart">
                                        <span class="iconfont icon-gouwuche"></span>
                                    </a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="bl94-81">
                                    <a href="#"><img src="./images/pro2.png" alt=""></a>
                                </div>
                                <p class="title ellipsis-single-line">
                                    <a href="#">麻辣小龙虾 1.5…</a>
                                </p>
                                <p class="info">
                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                    <a href="#" class="cart">
                                        <span class="iconfont icon-gouwuche"></span>
                                    </a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="bl94-81">
                                    <a href="#"><img src="./images/pro3.png" alt=""></a>
                                </div>
                                <p class="title ellipsis-single-line">
                                    <a href="#">香甜美人蕉 1.5…</a>
                                </p>
                                <p class="info">
                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                    <a href="#" class="cart">
                                        <span class="iconfont icon-gouwuche"></span>
                                    </a>
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- end cheap -->
            
            <!-- recommend-product start -->
            <section class="recommend-product">
                <div class="product-item">
                    <p class="title">吃好点</p>
                    <p class="desc ellipsis-single-line">新鲜大樱桃尝鲜</p>
                    <ul>
                        <li>
                            <div class="bl1-1">
                                <a href="#">
                                    <img src="./images/img1.png" alt="">
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="bl1-1">
                                <a href="#">
                                    <img src="./images/img2.png" alt="">
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="product-item">
                    <p class="title">产地量贩</p>
                    <p class="desc ellipsis-single-line">产地直发保质保鲜</p>
                    <ul>
                        <li>
                            <div class="bl1-1">
                                <a href="#">
                                    <img src="./images/img3.png" alt="">
                                </a>
                            </div>
                        </li>
                        <li>
                            <div class="bl1-1">
                                <a href="#">
                                    <img src="./images/img4.png" alt="">
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- end recommend-product -->
            
            <!-- product-category start -->
            <section class="product-category">
                <!-- tab-header start -->
                <div class="swiper tab-header">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <p class="title">全部</p>
                            <span class="desc">猜你喜欢</span>
                        </div>
                        <div class="swiper-slide">
                            <p class="title">时令</p>
                            <span class="desc">当季优选</span>
                        </div>
                        <div class="swiper-slide">
                            <p class="title">进口</p>
                            <span class="desc">国际直采</span>
                        </div>
                        <div class="swiper-slide">
                            <p class="title">人气</p>
                            <span class="desc">大家在买</span>
                        </div>
                    </div>
                </div>
                <!-- end tab-header -->
                <!-- tab-content start -->
                <div class="swiper tab-content">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="swiper-slide">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product1.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="tab-content-item">
                                            <div class="img">
                                                <div class="bl94-81">
                                                    <img src="./images/product2.png" alt="">
                                                </div>
                                            </div>
                                            <div class="info">
                                                <p class="title ellipsis-single-line">红颜草莓 1.5kg</p>
                                                <p class="marks">
                                                    <span class="mark active">特价</span>
                                                    <span class="mark">24H发货</span>
                                                </p>
                                                <p class="price-cart">
                                                    <span class="price">¥ 20.9<i>/箱</i></span>
                                                    <span class="cart iconfont icon-gouwuche"></span>
                                                </p>
                                                <div class="count">888 人已买过</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- end tab-content -->

            </section>
            <!-- end product-category -->
        </div>
    </main>
    <!-- end main -->
    <!-- tabber start -->
    <nav class="tabber">
        <ul>
            <li class="active">
                <a href="#">
                    <span class="iconfont icon-zhuye"></span>
                    <p>主页</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-fenlei"></span>
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-gouwuche"></span>
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-gerenzhongxin"></span>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </nav>
    <!-- tabber end -->
    <script>
        const carts = document.querySelectorAll(".product-category .cart");
        for (let i = 0; i < carts.length; i++) {
            carts[i].onclick = function (e) {
                // 阻止默认行为
                e.preventDefault();
                // 加入购物车
                alert("加入购物车成功");
            }
        }
    </script>

    <script src="./js/swiper-bundle.min.js"></script>
    <script>
        var tabHeaderSwiper = new Swiper('.tab-header', {
            spaceBetween: 35,
            slidesPerView: 4,
            watchSlidesVisibility: true,//防止不可点击
        })
        var tabContentSwiper = new Swiper('.tab-content', {
            spaceBetween: 10,
            thumbs: {
                swiper: tabHeaderSwiper,
            }
        })
    </script>
</body>

</html>